<template>
	<div id="login">
		<top-nav title="登录网站"></top-nav>
		<center>
			<img class="title-img" :src="mroLogoBlueIconData" loading="lazy">
		</center>
		<!-- 手机号登录层 -->
		<div id="cellphone-login-content">
			<input 
			id="cellphone-number" 
			class="cellphone-login-child cellphone-login-input" 
			type="number" 
			maxlength="11"
			placeholder="请输入手机号码"
			v-model="phoneNumber">
			<input 
			id="cellphone-password" 
			class="cellphone-login-child cellphone-login-input" 
			type="password"
			placeholder="请输入登录密码"
			v-model="password">
			<a @click="clickAccountLogin" id="cellphone-btn" class="cellphone-login-child">登录</a>
			<div class="cellphone-login-other cellphone-login-child">
				<a class="web-default-color" href="user-forgetRestPs.html">忘记密码</a>
			</div>
		</div>
		<!-- <center>
			<button @click="clickWechatLogin" v-if="isWeChatLogin" id="weChatLogin">
				<img class="btn-icon" :src="wechatWhiteIconData"> 微信登录
			</button>
		</center> -->
	</div>
</template>

<script>
// 自定义组件
import TopNav from "_components/project/common/TopNav"

// 本地图片
import mroLogoBlueIcon from '_assets/img/MROlogo-Blue.svg'
import wechatWhiteIcon from '_assets/img/wechat-icon-white.svg'

// 自定义方法
import { getProImg } from "_projectFn/images"
import { isWechatBroser, isPcBrowser } from "_commonFn/browser"
import { textVantToa } from '_projectFn/prompt'
import { checkMobile } from '_commonFn/check'
import { accountLogin, isLogined } from '_network/request'

export default {
	name: 'Login',
	data() {
		return {
			mroLogoBlueIconData: getProImg('MROlogo-Blue.svg', mroLogoBlueIcon),
			wechatWhiteIconData: getProImg('wechat-icon-white.svg', mroLogoBlueIcon),
			isWeChatLogin: isWechatBroser() || isPcBrowser(),
			phoneNumber: '',
			password: '',
		}
	},
	methods: {
		clickAccountLogin() {
			if (this.phoneNumber && this.password) {
				if (checkMobile(this.phoneNumber)) {
					accountLogin({account: this.phoneNumber, password: this.password})
				}
			} else {
				textVantToa({message: '不能为空'})
			}
		},
		// 点击微信登录
		clickWechatLogin() {
			
		}
	},
	components: {
		TopNav
	},
	mounted() {
		// 检测是否登录
		isLogined({})
	},
	activated() {
		// 检测是否登录
		isLogined({})
	}
}
</script>

<style lang="scss" scoped>
	#login {
		.title-img {
			width: 80%;
			max-width: 265px;
			max-height: 100px;
			margin-top: 20px;
		}

		/* 手机登录页面 */
		#cellphone-login-content {
			/* margin-top: 20px; */
			display: -webkit-flex;
			display: flex;
			justify-items: center;
			align-items: center;
			flex-direction: column;
			padding: 0 15px;
		}

		.cellphone-login-child {
			margin-top: 20px;
			height: 42px;
			width: 100%;
			max-width: 295px;
		}

		.cellphone-login-input {
			outline: none;
			border: 1px solid #d6d4d4;
			text-indent: 6px;
			border-radius: 4px;
		}

		#cellphone-btn {
			background: #007bbf;
			display: -webkit-flex;
			display: flex;
			align-items: center;
			color: white;
			font-size: 16px;
			font-weight: bold;
			border-radius: 4px;
			justify-content: center;
		}

		#cellphone-btn:active {
			background: #065783;
		}

		.cellphone-login-other {
			display: -webkit-flex;
			display: flex;
			justify-content: space-between;
		}
		/* 结束 */

		#weChatLogin{
			background: #2cb952;
			height: 50px;
			border: none;
			outline: none;
			border-radius: 24px;
			width: 80%;
			max-width: 295px;
		}
	}
</style>